<template>
  <div class="first-login-setup-container">
    <el-card class="setup-card">
      <h2>首次登录设置</h2>
      <p>请为您的新账户设置密码。</p>

      <el-form label-position="top">
        <el-form-item label="您的账户">
          <el-input :value="userAccount" disabled></el-input>
        </el-form-item>

        <el-form-item label="设置新密码">
          <el-input type="password" v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认新密码">
          <el-input type="password" v-model="confirmPassword" placeholder="请再次输入新密码" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="goToProfileSetup" :disabled="!newPassword || newPassword !== confirmPassword">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {ElMessage} from "element-plus";
import {updatePasswordAPI} from "../api/user/user.js";

const route = useRoute();
const router = useRouter();

// 从路由参数中获取用户账户
const userAccount = route.params.userAccount;

const newPassword = ref('');
const confirmPassword = ref('');

const goToProfileSetup =async () => {
  // 在实际应用中：
  // 1. 校验密码是否符合要求
  if (confirmPassword.value !== newPassword.value){
    ElMessage.error('两次输入的密码不一致，请重新输入');
    return;
  }
  // 2. 调用后端接口保存新密码，并传递 userAccount 和 newPassword
  const res = await updatePasswordAPI(newPassword.value);
  if (res.code === 200){
    ElMessage.success('密码设置成功，请牢记您的密码');
    router.push({ name: 'ProfileSetup', params: { userAccount: userAccount } });
  }
};
</script>

<style scoped>
.first-login-setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1a1a2e; /* Match login page background */
  padding: 20px;
}

.setup-card {
  width: 400px; /* Adjust width as needed */
  max-width: 95%;
  padding: 30px;
  border-radius: 12px;
  background-color: #2a2a40; /* Match login card background */
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid #404060;
  text-align: center;
}

.setup-card h2 {
    color: #66b1ff;
    margin-bottom: 20px;
}

.setup-card p {
    color: #b3b3b3;
    margin-bottom: 30px;
}

/* Basic Element Plus overrides for dark theme */
.setup-card :deep(.el-form-item__label) {
    color: #b3b3b3 !important;
}

.setup-card :deep(.el-input__inner) {
    background-color: #ffffff !important; /* White background */
    /* border-color: #404060 !important; */ /* Remove dark border override */
    color: #303133 !important; /* Dark text color */
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important; */ /* Remove inner shadow */
    border-radius: 4px !important;
    border: 1px solid #dcdfe6; /* Add a standard light border */
}

.setup-card :deep(.el-input__inner::placeholder) {
    color: #b3b3b3;
}

.setup-card :deep(.el-input__prefix-inner) {
    color: #b3b3b3; /* Icon color */
}

.setup-card :deep(.el-button--primary) {
    width: 100%;
    margin-top: 20px;
}
</style> 